<template>
  <div @click="onHeaderClick">
    <div :class="[clsPrefix + 'tag', clsPrefix + 'tag-checked']" v-for="(item, index) in selectedMultiple" :key="index">
      <span :class="[clsPrefix + 'tag-text']">{{ item.label }}</span>
      <Icon name="x-circle" @click.stop="removeTag(item)"></Icon>
    </div>
    <span
      :class="singleDisplayClasses"
      v-show="singleDisplayValue"
    >{{ singleDisplayValue }}</span>
    <input
      ref="input"
      :id="inputElementId"
      type="text"
      v-if="filterable"
      v-model="query"
      :disabled="disabled"
      :class="[prefixCls + '-input']"
      :placeholder="showPlaceholder ? localePlaceholder : ''"
      :style="inputStyle"
      autocomplete="off"
      spellcheck="false"
      @keydown="resetInputState"
      @keydown.delete="handleInputDelete"
      @focus="onInputFocus"
      @blur="onInputFocus"
    />
    <span :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.stop="onClear"><Icon name="x-circle"></Icon></span>
    <span :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"><Icon name="chevron-down"></Icon></span>
  </div>
</template>
<script>
import Config from '../../config'
import Icon from '../icon'
import Emitter from '../../mixins/emitter'
import Locale from '../../mixins/locale'
const prefixCls = `${Config.clsPrefix}select`
const localePrefix = `${Config.localePrefix}.select.`
export default {
  name: `${Config.namePrefix}SelectHead`,
  mixins: [ Emitter, Locale ],
  components: { Icon },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    remote: {
      type: Boolean,
      default: false
    },
    initialLabel: {
      type: [String, Number, Array]
    },
    values: {
      type: Array,
      default: () => []
    },
    clearable: {
      type: [Function, Boolean],
      default: false
    },
    inputElementId: {
      type: String
    },
    placeholder: {
      type: String
    },
    queryProp: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      clsPrefix: Config.clsPrefix,
      prefixCls: prefixCls,
      query: '',
      inputLength: 20,
      remoteInitialLabel: this.initialLabel,
      preventRemoteCall: false
    }
  },
  computed: {
    singleDisplayClasses () {
      const {filterable, multiple, showPlaceholder} = this
      return [{
        [prefixCls + '-placeholder']: showPlaceholder && !filterable,
        [prefixCls + '-selected-value']: !showPlaceholder && !multiple && !filterable
      }]
    },
    singleDisplayValue () {
      if ((this.multiple && this.values.length > 0) || this.filterable) return ''
      return `${this.selectedSingle}` || this.localePlaceholder
    },
    showPlaceholder () {
      let status = false
      if (!this.multiple) {
        const value = this.values[0]
        if (typeof value === 'undefined' || String(value).trim() === '') {
          status = !this.remoteInitialLabel
        }
      } else {
        if (!this.values.length > 0) {
          status = true
        }
      }
      return status
    },
    resetSelect () {
      return !this.showPlaceholder && this.clearable
    },
    inputStyle () {
      let style = {}

      if (this.multiple) {
        if (this.showPlaceholder) {
          style.width = '100%'
        } else {
          style.width = `${this.inputLength}px`
        }
      }
      return style
    },
    localePlaceholder () {
      if (this.placeholder === undefined) {
        return this.t(localePrefix + 'placeholder')
      } else {
        return this.placeholder
      }
    },
    selectedSingle () {
      const selected = this.values[0]
      return selected ? selected.label : (this.remoteInitialLabel || '')
    },
    selectedMultiple () {
      return this.multiple ? this.values : []
    }
  },
  methods: {
    onInputFocus (e) {
      this.$emit(e.type === 'focus' ? 'on-input-focus' : 'on-input-blur')
    },
    removeTag (value) {
      if (this.disabled) return false
      this.dispatch(`${Config.namePrefix}Select`, 'on-select-selected', value)
    },
    resetInputState () {
      this.inputLength = this.$refs.input.value.length * 12 + 20
    },
    handleInputDelete () {
      if (this.multiple && this.selectedMultiple.length && this.query === '') {
        this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1])
      }
    },
    onHeaderClick (e) {
      if (this.filterable && e.target === this.$el) {
        this.$refs.input.focus()
      }
    },
    onClear () {
      this.$emit('on-clear')
    }
  },
  watch: {
    values ([value]) {
      if (!this.filterable) return
      this.preventRemoteCall = true
      if (this.multiple) {
        this.query = ''
        this.preventRemoteCall = false // this should be after the query change setter above
        return
      }
      // #982
      if (typeof value === 'undefined' || value === '' || value === null) this.query = ''
      else this.query = value.label
      this.$nextTick(function () { this.preventRemoteCall = false }) // this should be after the query change setter above
    },
    query (val) {
      if (this.preventRemoteCall) {
        this.preventRemoteCall = false
        return
      }

      this.$emit('on-query-change', val)
    },
    queryProp (query) {
      if (query !== this.query) this.query = query
    }
  }
}
</script>
